.box{
	width: 200px;
	height: 250px;
	border: 1px solid blue;
	text-align: center;
	font-size: 32px;
	/* 浮动:让块级盒子水平摆放 */
	/* float(浮动):left(左浮动)/right(右浮动)/none(默认值); */
	float: right;
}
.box2{
	width: 700px;
	height: 240px;
	border: 1px solid plum;
}
第一种清除浮动法:额外标签法
.clear{
	/* 清楚两端元素 */
	clear: both;
}
/* 第二种清除浮动方法: */
.bigbox{
	overflow: hidden;
}
/* after 在什么之后 */
/* 第三种清除浮动的方法:给父级元素添加after伪类 */
.clearfix::after{  /* 伪类:在clearfix类的后面 */
	content: "";    /* 内容:空 */
	display: block;  /* 将伪类转为块元素 */
	height: 0;
	clear: both;   /* 清除浮动两端 */
	visibility: hidden;  /* 显示状态:隐藏 */
}
/* 第四种清除浮动的方法:给父级元素添加双伪元素 */
.clearfix::before,.clearfix::after{
	content: "";
	display: table;
}
.clearfix::after{
	clear:both;
}
/* 浮动的特性:
     1.浮动的盒子会脱离标准流(脱标)。 
	 2.浮动的盒子一行内显示并顶端对齐，一行装不下会另起一行。
	 3.浮动的盒子具有和行内块元素相似的特性。
	 */
	/* 传统的网页布局:
	    1.额外标签法：隔墙法。不建议使用。
		2.给父级元素添加overflow:hidden属性。
	*/